<template>
	<view>
		<view class="block_1">
			<view class="b1">
				<view class="b2">
					<image :src="imgurl+'/p5.png'" mode=""></image>
					<view class="abs">
						<view class="img1">
							<image :src="imgurl+'/p6.png'" mode=""></image>
							<view class="">
								我的可用余额(元)
							</view>
						</view>
						<view class="price">
							<view class="p1">
								{{price}}
							</view>
							<view class="btn" @click="pagetx">
								提现记录
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="block_2">
				<view class="b_f">
					<view class="tit">提现金额</view>
					<view class="price_flex">
						<view class="flex_l">
							<span>￥</span>
							<input placeholder-class="inputs" v-model="value" type="number" placeholder="请输入" />
						</view>
						<view class="btn" @click="alltx">
							全部提现
						</view>
					</view>
					<view class="flex_1">
						<view class="">
							提现至
						</view>
						<view class="flex_b" style="font-size: 28rpx;">
							<image src="../../static/icon/wx1.png" mode=""></image>
							微信账户
						</view>
					</view>
				</view>
				<view class="btns" @click="handleTx">
					申请提现
				</view>
			</view>
			<view class="tests">
				<view class="tit">
					温馨提示
				</view>
				<view class="tt">
					1、单笔提现金额需大于2元
				</view>
				<view class="tt">
					2、提现申请后预计将在三个工作日内将款项发放至您的微信账户中
				</view>
				<view class="tt">
					3、您理解并同意，当提现申请审核通过后，提现金额将由本平台委托的第三方公司(即“伊可库有限公司”)代为转账，每笔2元手续费4、在法律法规允许的范围内对本次规则进行解释并作出适当修改，如有疑问，请联系客服
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userAgent,drawApply
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				imgurl:getApp().globalData.WEBIMG,
				price:0,
				value:''
				
			};
		},
		onLoad() {
			userAgent({}).then(res=>{
				this.price = res.data.amount
			})
		},
		methods:{
			alltx(){
				this.value = this.price
			},
			handleTx(){
				if(this.value ==''){
					uni.showToast({
						icon: 'none',
						title: "请输入提现金额",
					})
					return
				}
				if(this.value <=2){
					uni.showToast({
						icon: 'none',
						title: "不满足提现金额",
					})
					return
				}
				drawApply({amount:this.value}).then(res=>{
					if(res.code == 200){
						uni.showToast({
							icon: 'none',
							title: "已申请提现",
						})
						setTimeout(()=>{
							this.value = ''
						},300)
					}
				})
			},
			pagetx(){
				uni.navigateTo({
					url:'/mypage/proxy/txrecord'
				})
			}
		}
	}
</script>

<style lang="scss">
	.block_1 {
		min-height: 100vh;
		background: #F6F6F6;

		.b1 {
			background: #29A85C;
			height: 120rpx;
			box-sizing: border-box;
			padding-top: 36rpx;
		}

		.b2 {
			width: 710rpx;
			height: 220rpx;
			margin: 0rpx auto;
			position: relative;

			image {
				width: 710rpx;
				height: 220rpx;
			}

			.abs {
				position: absolute;
				top: 0;
				width: 710rpx;
				height: 220rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.img1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 24rpx auto;

					.p1 {
						font-family: 'DINB';
						font-weight: bold;
						font-size: 80rpx;
						color: #1E703F;
						line-height: 80rpx;
					}

					.btn {
						width: 168rpx;
						height: 68rpx;
						background: #29A85C;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 68rpx;
						text-align: center;
					}
				}
			}
		}
	}

	.block_2 {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 160rpx auto 0rpx;
		padding: 44rpx 20rpx;
		box-sizing: border-box;

		.b_f {
			padding: 0rpx 20rpx;

			.tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}

			.price_flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				padding-bottom: 20rpx;
				margin-top: 32rpx;

				.flex_l {
					display: flex;
					font-family: 'DINB';
					font-weight: bold;
					font-size: 40rpx;
					color: #000000;
					flex: 1;
					align-items: center;
				}

				.inputs {
					font-weight: 400;
					font-size: 30rpx;
				}

				.btn {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #0CAD61;
				}
			}

			.flex_1 {
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				margin: 40rpx auto;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}
			}
		}

		.btns {
			width: 670rpx;
			height: 100rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
		}
	}

	.tests {
		padding: 28rpx 20rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
		.tit{
			font-weight: bold;
			font-size: 32rpx;
		}
		.tt{
			margin: 10rpx auto;
		}
	}
</style>